DropFile.js ➔ updateFileList - Code Metrics - Stefanius67/Formgenerator - Measure and Improve Code Quality continuously with Scrutinizer

DropFile.js ➔ updateFileList B
last analyzed 2025-10-06 19:03 UTC

↳ Parent: script/DropFile.js

Complexity

Conditions

Size

Total Lines	68
Code Lines	51

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	4
eloc	51
c	0
b	0
f	0
dl	0
loc	68
rs	8.6036

How to fix Long Method



class DropFile
{
    /**
     * Constructor.
     */
    constructor() 
    {
        this.oDropFile = null;
        this.oFileInput = null;
        this.oFileSelect = null;
        this.oSelectedFiles = null;
        
        this.dataTransfer = new DataTransfer();

    }
    
    init(strName)

    {
        this.oDropFile = document.querySelector('.dropfile');
        this.oFileInput = document.querySelector('[name="files[]"');
        this.oFileSelect = document.querySelector('.fileselect');
        this.oSelectedFiles = document.querySelector('.selectedfiles');

        ['drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop'].forEach( event => this.oDropFile.addEventListener(event, function(e) {
            e.preventDefault();
            e.stopPropagation();
        }), false );
        
        ['dragover', 'dragenter'].forEach( event => this.oDropFile.addEventListener(event, function(e) {

            g_oDropFile.oDropFile.classList.add('dragover');

        }), false );
        
        ['dragleave', 'dragend', 'drop'].forEach( event => this.oDropFile.addEventListener(event, function(e) {

            g_oDropFile.oDropFile.classList.remove('dragover');

        }), false );
        
        this.oDropFile.addEventListener('drop', function(e) {
            for (var i = 0; i < e.dataTransfer.files.length; i++) {
                // TODO: check, if allowed
                g_oDropFile.dataTransfer.items.add(e.dataTransfer.files[i]);

            }
            updateFileList();
        }, false );
        
        this.oFileInput.addEventListener('change', function(e) {

            for (var i = 0; i < g_oDropFile.oFileInput.files.length; i++) {

                // TODO: check, if allowed
                g_oDropFile.dataTransfer.items.add(g_oDropFile.oFileInput.files[i]);
            }
            updateFileList();
        }, false );
    }
    
    setSelectedFiles()
    {
        this.oFileInput.files = g_oDropFile.dataTransfer.files;

        
        return true;
    }
}

function updateFileList() 
{
    /*
    const filesArray = Array.from(g_oDropFile.dataTransfer.files);
    if (filesArray.length > 1) {
        g_oDropFile.oSelectedFiles.innerHTML = '<p>Selected files:</p><ul><li>' + filesArray.map(f => f.name).join('</li><li>') + '</li></ul>';
    } else if (filesArray.length == 1) {
        g_oDropFile.oSelectedFiles.innerHTML = `<p>Selected file: ${filesArray[0].name}</p>`;
    } else {
        g_oDropFile.oSelectedFiles.innerHTML = '';
    }
    */
    if (g_oDropFile.dataTransfer.files.length === 0) {

        g_oDropFile.oSelectedFiles.innerHTML = '';
        return;
    }
    const aCSSClasses = {
        'image/jpg'                                                                 : 'imgfile',
        'image/jpeg'                                                                : 'imgfile',
        'image/png'                                                                 : 'imgfile',
        'image/gif'                                                                 : 'imgfile',
        'image/bmp'                                                                 : 'imgfile',
        'image/svg+xml'                                                             : 'imgfile',
        'application/pdf'                                                           : 'pdffile',
        'application/vnd.ms-excel'                                                  : 'xlsfile',
        'application/msexcel'                                                       : 'xlsfile',
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'         : 'xlsfile',
        'text/csv'                                                                  : 'xlsfile',
        'application/vnd.ms-word'                                                   : 'docfile',
        'application/msword'                                                        : 'docfile',
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document'   : 'docfile',
        'text/x-vcard'                                                              : 'vcard',
        'text/calendar'                                                             : 'ical',
        'application/zip'                                                           : 'archive',
        'application/x-zip-compressed'                                              : 'archive',
        'application/vnd.rar'                                                       : 'archive',
        'application/x-rar-compressed'                                              : 'archive',
        'application/x-tar'                                                         : 'archive',
        'application/x-tar-compressed'                                              : 'archive',
        'application/x-7z-compressed'                                               : 'archive',
        'audio/mpeg'                                                                : 'audiofile', 
        'audio/mp3'                                                                 : 'audiofile', 
        'video/mpeg'                                                                : 'videofile', 
        'video/mp4'                                                                 : 'videofile',
        'video/x-msvideo'                                                           : 'videofile', 
    };
    var strSelectedFiles = '';
    for (var i = 0; i < g_oDropFile.dataTransfer.files.length; i++) {
        var strCSSClass = 'file';
        if (aCSSClasses[g_oDropFile.dataTransfer.files[i].type]) {
            strCSSClass += ' ' + aCSSClasses[g_oDropFile.dataTransfer.files[i].type];
        }
        const EOL = "\n";
        const strName = g_oDropFile.dataTransfer.files[i].name;
        const strOnClick = "deleteSelectedFile(" + i + ", '" + strName + "');";
        const strDeleteFromList = 'Eintrag aus der Liste entfernen';
        
        strSelectedFiles += '<div class="dropfileitem">' + EOL;
        strSelectedFiles += '    <div class="dropedfile">' + EOL;
        strSelectedFiles += '        <div class="dropedname">' + EOL;
        strSelectedFiles += '            <span class="' + strCSSClass + '" title="' + strName + '">' + strName + '</span>' + EOL;
        strSelectedFiles += '        </div>' + EOL;
        strSelectedFiles += '        <div class="dropeddelete" onclick="' + strOnClick + '" title="' + strDeleteFromList + '"></div>' + EOL;
        strSelectedFiles += '    </div>' + EOL;
        strSelectedFiles += '</div>' + EOL;
    }
    g_oDropFile.oSelectedFiles.innerHTML = strSelectedFiles;
}

function deleteSelectedFile(iIndex, strFilename)
{
    if (confirm('Soll die Datei [' + strFilename + '] aus der Liste entfernt werden?') == true) {

        g_oDropFile.dataTransfer.items.remove(iIndex);

        updateFileList();
    }
}

const g_oDropFile = new DropFile();




1
2
3			class DropFile
4			{
5			/**
6			* Constructor.
7			*/
8			constructor()
9			{
10			this.oDropFile = null;
11			this.oFileInput = null;
12			this.oFileSelect = null;
13			this.oSelectedFiles = null;
14
15			this.dataTransfer = new DataTransfer();
			0 ignored issues – show Bug introduced 2023-10-31 14:58 UTC by Report Bug Copy Issue Report The variable `DataTransfer` seems to be never declared. If this is a global, consider adding a `/** global: DataTransfer */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
16			}
17
18			init(strName)
			0 ignored issues – show Unused Code introduced 2023-10-31 14:58 UTC by Report Bug Copy Issue Report The parameter `strName` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history...
19			{
20			this.oDropFile = document.querySelector('.dropfile');
21			this.oFileInput = document.querySelector('[name="files[]"');
22			this.oFileSelect = document.querySelector('.fileselect');
23			this.oSelectedFiles = document.querySelector('.selectedfiles');
24
25			['drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop'].forEach( event => this.oDropFile.addEventListener(event, function(e) {
26			e.preventDefault();
27			e.stopPropagation();
28			}), false );
29
30			['dragover', 'dragenter'].forEach( event => this.oDropFile.addEventListener(event, function(e) {
			0 ignored issues – show Unused Code introduced 2023-10-31 14:58 UTC by Report Bug Copy Issue Report The parameter `e` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history...
31			g_oDropFile.oDropFile.classList.add('dragover');
			0 ignored issues – show Bug introduced 2023-10-31 14:58 UTC by Report Bug Copy Issue Report The local (let) variable `g_oDropFile` is used before it is defined. This will cause a reference error. Loading history...
32			}), false );
33
34			['dragleave', 'dragend', 'drop'].forEach( event => this.oDropFile.addEventListener(event, function(e) {
			0 ignored issues – show Unused Code introduced 2023-10-31 14:58 UTC by Report Bug Copy Issue Report The parameter `e` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history...
35			g_oDropFile.oDropFile.classList.remove('dragover');
			0 ignored issues – show Bug introduced 2023-10-31 14:58 UTC by Report Bug Copy Issue Report The local (let) variable `g_oDropFile` is used before it is defined. This will cause a reference error. Loading history...
36			}), false );
37
38			this.oDropFile.addEventListener('drop', function(e) {
39			for (var i = 0; i < e.dataTransfer.files.length; i++) {
40			// TODO: check, if allowed
41			g_oDropFile.dataTransfer.items.add(e.dataTransfer.files[i]);
			0 ignored issues – show Bug introduced 2023-10-31 14:58 UTC by Report Bug Copy Issue Report The local (let) variable `g_oDropFile` is used before it is defined. This will cause a reference error. Loading history...
42			}
43			updateFileList();
44			}, false );
45
46			this.oFileInput.addEventListener('change', function(e) {
			0 ignored issues – show Unused Code introduced 2023-10-31 14:58 UTC by Report Bug Copy Issue Report The parameter `e` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history...
47			for (var i = 0; i < g_oDropFile.oFileInput.files.length; i++) {
			0 ignored issues – show Bug introduced 2023-10-31 14:58 UTC by Report Bug Copy Issue Report The local (let) variable `g_oDropFile` is used before it is defined. This will cause a reference error. Loading history...
48			// TODO: check, if allowed
49			g_oDropFile.dataTransfer.items.add(g_oDropFile.oFileInput.files[i]);
50			}
51			updateFileList();
52			}, false );
53			}
54
55			setSelectedFiles()
56			{
57			this.oFileInput.files = g_oDropFile.dataTransfer.files;
			0 ignored issues – show Bug introduced 2023-10-31 14:58 UTC by Report Bug Copy Issue Report The local (let) variable `g_oDropFile` is used before it is defined. This will cause a reference error. Loading history...
58
59			return true;
60			}
61			}
62
63			function updateFileList()
64			{
65			/*
66			const filesArray = Array.from(g_oDropFile.dataTransfer.files);
67			if (filesArray.length > 1) {
68			g_oDropFile.oSelectedFiles.innerHTML = '<p>Selected files:</p><ul><li>' + filesArray.map(f => f.name).join('</li><li>') + '</li></ul>';
69			} else if (filesArray.length == 1) {
70			g_oDropFile.oSelectedFiles.innerHTML = `<p>Selected file: ${filesArray[0].name}</p>`;
71			} else {
72			g_oDropFile.oSelectedFiles.innerHTML = '';
73			}
74			*/
75			if (g_oDropFile.dataTransfer.files.length === 0) {
			0 ignored issues – show Bug introduced 2023-10-31 14:58 UTC by Report Bug Copy Issue Report The local (let) variable `g_oDropFile` is used before it is defined. This will cause a reference error. Loading history...
76			g_oDropFile.oSelectedFiles.innerHTML = '';
77			return;
78			}
79			const aCSSClasses = {
80			'image/jpg' : 'imgfile',
81			'image/jpeg' : 'imgfile',
82			'image/png' : 'imgfile',
83			'image/gif' : 'imgfile',
84			'image/bmp' : 'imgfile',
85			'image/svg+xml' : 'imgfile',
86			'application/pdf' : 'pdffile',
87			'application/vnd.ms-excel' : 'xlsfile',
88			'application/msexcel' : 'xlsfile',
89			'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' : 'xlsfile',
90			'text/csv' : 'xlsfile',
91			'application/vnd.ms-word' : 'docfile',
92			'application/msword' : 'docfile',
93			'application/vnd.openxmlformats-officedocument.wordprocessingml.document' : 'docfile',
94			'text/x-vcard' : 'vcard',
95			'text/calendar' : 'ical',
96			'application/zip' : 'archive',
97			'application/x-zip-compressed' : 'archive',
98			'application/vnd.rar' : 'archive',
99			'application/x-rar-compressed' : 'archive',
100			'application/x-tar' : 'archive',
101			'application/x-tar-compressed' : 'archive',
102			'application/x-7z-compressed' : 'archive',
103			'audio/mpeg' : 'audiofile',
104			'audio/mp3' : 'audiofile',
105			'video/mpeg' : 'videofile',
106			'video/mp4' : 'videofile',
107			'video/x-msvideo' : 'videofile',
108			};
109			var strSelectedFiles = '';
110			for (var i = 0; i < g_oDropFile.dataTransfer.files.length; i++) {
111			var strCSSClass = 'file';
112			if (aCSSClasses[g_oDropFile.dataTransfer.files[i].type]) {
113			strCSSClass += ' ' + aCSSClasses[g_oDropFile.dataTransfer.files[i].type];
114			}
115			const EOL = "\n";
116			const strName = g_oDropFile.dataTransfer.files[i].name;
117			const strOnClick = "deleteSelectedFile(" + i + ", '" + strName + "');";
118			const strDeleteFromList = 'Eintrag aus der Liste entfernen';
119
120			strSelectedFiles += '<div class="dropfileitem">' + EOL;
121			strSelectedFiles += ' <div class="dropedfile">' + EOL;
122			strSelectedFiles += ' <div class="dropedname">' + EOL;
123			strSelectedFiles += ' <span class="' + strCSSClass + '" title="' + strName + '">' + strName + '</span>' + EOL;
124			strSelectedFiles += ' </div>' + EOL;
125			strSelectedFiles += ' <div class="dropeddelete" onclick="' + strOnClick + '" title="' + strDeleteFromList + '"></div>' + EOL;
126			strSelectedFiles += ' </div>' + EOL;
127			strSelectedFiles += '</div>' + EOL;
128			}
129			g_oDropFile.oSelectedFiles.innerHTML = strSelectedFiles;
130			}
131
132			function deleteSelectedFile(iIndex, strFilename)
133			{
134			if (confirm('Soll die Datei [' + strFilename + '] aus der Liste entfernt werden?') == true) {
			0 ignored issues – show Debugging Code Best Practice introduced 2023-10-31 14:58 UTC by Report Bug Copy Issue Report The `confirm` UI element is often considered obtrusive and is generally only used as a temporary measure. Consider replacing it with another UI element. Loading history... Best Practice introduced 2023-10-31 14:58 UTC by Report Bug Copy Issue Report Comparing `confirm("Soll die Datei ...iste entfernt werden?")` to `true` using the `==` operator is not safe. Consider using `===` instead. Loading history...
135			g_oDropFile.dataTransfer.items.remove(iIndex);
			0 ignored issues – show Bug introduced 2023-10-31 14:58 UTC by Report Bug Copy Issue Report The local (let) variable `g_oDropFile` is used before it is defined. This will cause a reference error. Loading history...
136			updateFileList();
137			}
138			}
139
140			const g_oDropFile = new DropFile();
			0 ignored issues – show Unused Code introduced 2023-10-31 14:58 UTC by Report Bug Copy Issue Report The constant `g_oDropFile` seems to be never used. Consider removing it. Loading history...
141
142

Stefanius67 / Formgenerator

DropFile.js ➔ updateFileList B last analyzed 2025-10-06 19:03 UTC

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like

DropFile.js ➔ updateFileList B
last analyzed 2025-10-06 19:03 UTC